<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-08 23:13:29
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-27 14:15:41
 * @FilePath: /bangand-low-code/src/layouts/components/SubMenuItem.vue
 * @Description: 自定义子菜单
-->

<template>
  <a-menu-item v-if="!hasChild && showMenu" :key="item.path" v-bind="$props" v-on="$listeners">
    <v-icon v-if="icon" :name="icon" />
    <span>{{ $t(item?.meta?.title) }}</span>
  </a-menu-item>

  <a-sub-menu
    v-else-if="hasChild && showMenu"
    :key="`submenu-${item.path}`"
    v-bind="$props"
    v-on="$listeners"
    :popupClassName="`p-layout-popup-menu ${navTheme}`"
  >
    <template #title>
      <v-icon v-if="icon" :name="icon" />
      <span>{{ $t(item?.meta?.title) }}</span>
    </template>

    <template v-for="childrenItem in item.children || []">
      <SubMenuItem :item="childrenItem" :key="childrenItem.path" />
    </template>
  </a-sub-menu>
</template>

<script>
import Vue from 'vue';
import { Menu } from 'ant-design-vue';
import { objectUtils } from '@/utils';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';

export default {
  // 组件的名字或者页面的名字
  name: 'SubMenuItem',
  mixins: [appLatyouMixin],
  isSubMenu: true,
  // 加载组件
  components: {},
  // 父级组件传过来的值
  props: {
    ...Menu.SubMenu.props,
    // 菜单内容
    item: {
      type: Object,
      default: () => ({})
    }
  },
  // 页面数据
  data() {
    return {};
  },
  computed: {
    // 菜单icon
    icon() {
      return this.item?.meta?.icon || '';
    },
    // 有子菜单
    hasChild() {
      return !this.item.hideChildrenInMenu && objectUtils.isNotEmpty(this.item.children);
    },
    // 显示菜单
    showMenu() {
      return !this.item.hidden;
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {}
};
</script>

<style lang="less" scoped>
</style>
